<template>
  <div class="first">
    <div class="head">
      <div class="item">
        <div class="item_inner">
          <div class="item_l"><img src="../../../assets/img/index1.png"></div>
          <div class="item_r">
            <div>缴费进行中项目数</div>
            <div class="color_b">{{titleInfo.schoolPaymentSkuNum}}</div>
          </div>            
        </div>
      </div>
      <div class="item">
        <div class="item_inner">
          <div class="item_l"><img src="../../../assets/img/index2.png"></div>
          <div class="item_r">
            <div>今日缴费笔数</div>
            <div class="color_b">{{titleInfo.todayTotalPayNum}}</div>
          </div>            
        </div>
      </div>
      <div class="item">
        <div class="item_inner">
          <div class="item_l"><img src="../../../assets/img/index3.png"></div>
          <div class="item_r">
            <div>今日缴费金额</div>
            <div class="color_b">{{titleInfo.todayTotalPayAmount | currency('')}}</div>
          </div>            
        </div>
      </div>
      <div class="item">
        <div class="item_inner">
          <div class="item_l"><img src="../../../assets/img/index4.png" class="tip_img"></div>
          <div class="item_r">
            <div>累计收费金额</div>
            <div class="color_b">{{titleInfo.totalPayAmount | currency('')}}</div>
          </div>            
        </div>
      </div>
    </div>
    <div class="content_outer" v-if='tabInfo.length'>
      <el-tabs v-model="activeName" @tab-click="tabClick" >
        <el-tab-pane v-for="item in tabInfo" :key="item.schoolPaymentSkuId" :label="item.schoolPaymentSkuName" :name="item.schoolPaymentSkuId + ''"></el-tab-pane>
      </el-tabs>
      <div class="content">
        <div class="content_item">
          <div class="cotent_item_one">
            <div>今日缴费人数</div>
            <div>(<span class="color_r">{{content.todayPayNum}}</span>人)</div>
          </div>
          <div class="cotent_item_one">
            <div>已缴费总人数</div>
            <div>(<span class="color_r">{{content.totalPayNum}}</span>人)</div>
          </div>
          <div class="cotent_item_one">
            <div>未缴费人数</div>
            <div>(<span class="color_r">{{content.totalNoPayNum}}</span>人)</div>
          </div>
        </div>
        <div class="content_item">
          <div class="cotent_item_one" style="border: none;">
            <div>今日缴费金额</div>
            <div>(<span class="color_r">{{content.todayPayAmount | currency('')}}</span>元)</div>
          </div>
          <div class="cotent_item_one" style="border: none;">
            <div>已缴费金额</div>
            <div>(<span class="color_r">{{content.totalPayAmount | currency('')}}</span>元)</div>
          </div>
          <div class="cotent_item_one" style="border: none;">
            <div>未缴费金额</div>
            <div>(<span class="color_r">{{content.totalNOPayAmount | currency('')}}</span>元)</div>
          </div>
        </div>
      </div>      
    </div>
    <div class="no_tabinfo" v-if='!tabInfo.length'>暂无进行中的缴费项目</div>
    <div class="footer">
      <div class="footer_title">系统快捷入口</div>
      <div class="footer_content">
        <div class="footer_item" v-if="listRole('addProject')" @click="goPage(2)">
          <img src="../../../assets/img/footer1.jpg">
          <div>添加缴费项目</div>
        </div>
        <div class="footer_item" v-if="listRole('payProject')" @click="goPage(4)">
          <img src="../../../assets/img/footer3.jpg">
          <div>查看缴费项目</div>
        </div>
        <div class="footer_item" v-if="listRole('basicSet')" @click="goPage(5)">
          <img src="../../../assets/img/footer4.jpg">
          <div>查看收款账户</div>
        </div>
        <div class="footer_item" @click="goPage(6)">
          <img src="../../../assets/img/footer5.jpg">
          <div>更改密码</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getTitleInfo, getTabInfo, getItemInfo} from 'api/school/first/index'
export default {
  data () {
    return {
      activeName: '',
      titleInfo: {}, // 学校信息
      tabInfo: [], // tab栏信息
      content: {} // tab每项具体信息
    }
  },
  created () {
    this.$nextTick(() => {
      if (this.tabInfo.length && document.querySelector('.el-tabs__nav')) {
        document.querySelector('.el-tabs__nav').style.overflowX = 'auto'
      }
    })
    getTitleInfo().then(res => {
      this.titleInfo = res.data
    })
    getTabInfo().then(res => {
      this.tabInfo = res.data
      if (this.tabInfo.length) {
        this.activeName = this.tabInfo[0].schoolPaymentSkuId + ''
        this.getData()
      } else {
        this.content = {
          todayPayNum: 0,
          todayPayAmount: 0,
          todayPayClassNum: 0,
          totalPayNum: 0,
          totalPayAmount: 0,
          totalPayclassNum: 0,
          totalNoPayNum: 0,
          totalNOPayAmount: 0,
          totalNoPayclassNum: 0
        }
      }
    })
  },
  destroyed () {
    if (document.querySelector('.el-tabs__nav')) {
      document.querySelector('.el-tabs__nav').style.overflowX = 'hidden'
    }
  },
  methods: {
    getData () {
      getItemInfo({schoolPaymentSkuId: Number(this.activeName)}).then(res => {
        this.content = res.data
      })
    },
    goPage (index) {
      switch (index) {
        case 1:
          this.$router.push({name: 'payManage'})
          break
        case 2:
          this.$router.push({name: 'addProject'})
          break
        case 3:
          this.$router.push({name: 'payManage'})
          break
        case 4:
          this.$router.push({name: 'payProject'})
          break
        case 5:
          this.$router.push({name: 'basicSet'})
          break
        case 6:
          this.$router.push({name: 'changePassword'})
          break
      }
    },
    tabClick () {
      this.getData()
    }
  }
}
</script>
<style lang="less" scoped>
  .first {
    .color_r {
      color: red;
    }
    .color_b {
      color: #20a0ff;
      font-size: 20px;
    }
    padding: 20px;
    .head {
      padding: 20px;
      border: 1px solid rgb(228, 228, 228);
      border-radius: 10px;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .item {
        margin-right: 20px;
        .item_inner {
          height: 100px;
          width: 250px;
          padding-left: 20px;
          border: 1px solid rgb(228, 228, 228);
          border-radius: 5px;
          display: flex;
          align-items: center;          
          .item_l {
            width: 60px;
            img {
              width: 50px;
              height: 50px;
            }
            .tip_img {
              width: 60px;
              height: 60px;
            }
          }
          .item_r {
            height: 60px;
            padding-left: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
        }
      }
    }
    .no_tabinfo {
      height: 100px;
      text-align: center;
      line-height: 100px;
      color: #999;
      border: 1px solid rgb(228, 228, 228);
      border-radius: 10px;      
    }
    .content_outer {
      border: 1px solid rgb(228, 228, 228);
      border-radius: 10px;      
    }
    .content {
      padding: 20px 20px 0 20px;
      .content_item {
        display: flex;
        .cotent_item_one {
          flex: 1;
          margin-right: 40px;
          display: flex;
          border-bottom: 1px solid rgb(228, 228, 228);
          justify-content: space-between;
          line-height: 3;
        }
        .cotent_item_one:last-of-type {
          margin: 0;
        }
      }
      .content_tip {
        text-align: right;
        line-height: 4;
        color: #20a0ff;
        span {
          cursor: pointer;
        }
      }
    }
    .footer {
      margin-top: 20px;
      height: 200px;
      border: 1px solid rgb(228, 228, 228);
      border-radius: 10px;
      .footer_title {
        color: #20a0ff;
        height: 50px;
        padding-left: 30px;
        line-height: 50px;
        border-bottom: 1px solid rgb(228, 228, 228);
      }
      .footer_content {
        display: flex;
        align-items: center;
        padding: 30px;
        .footer_item {
          cursor: pointer;
          width: 150px;
          text-align: center;
          img {
            width: 75px;
            height: 75px;
          }
          &:hover {
            color: #20a0ff;
          }
        }
      }
    }
  }
</style>

